<!--
- 双向绑定：@input、:value
- 派发校验事件
-->
<template>
  <div>
    <!-- 自定义组件要实现v-model必须实现:value, @input -->
    <!-- $attrs存储的是props之外的部分：如type、placeholder等属性及其属性值 -->
    <input :value="value" @input="onInput" v-bind="$attrs" />
  </div>
</template>
<script>
export default {
  // 避免顶层容器继承属性(不加这个会导致div父元素含有如type、placeholder等标签属性)
  inheritAttrs: false, 
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  methods: {
    onInput(e) {
      // 通知父组件数值变化
      this.$emit("input", e.target.value);
      // 通知FormItem校验
      this.$parent.$emit("validateInput");
    },
  },
};
</script>